<template>
  <div>
    <p>数据绑定v-bind</p>
    <!--花括号绑定属性{{}}-->
    <h1>我的名字:{{ name }}</h1>
    <!--绑定属性-->
    <h1>
      我的年龄：
      <input type="text" v-bind:value="age" :title="age" />
    </h1>
    <!--绑定动态属性-->
    <a :[attrName]="title">动态链接</a>
  </div>
</template>

<script>
export default {
  name: "demon1",
  data() {
    return {
      name: "lixx2048@163.com",
      age: 30,
      title: "这是一个连接",
      attrName: "title"
    };
  },
  mounted() {
    setTimeout(() => {
      this.name = "lixiang6153@126.com(新)";
      // 绑定自定义属性
      this.attrName = "msg";
    }, 3000);
  }
};
</script>
<style lang="stylus" scoped></style>
